<template>
	<view>
		<view class="release-person white-bg mb-24">
			<view class="info acea-row row-middle">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="info">
					<view class="name">{{ userInfo.nickname }}</view>
					<view class="send-time">{{ dataform.address }} </view>
				</view>
				
			</view>
			<view class="acea-row  pd-t-b-24 row-between" style="margin-top: 20rpx;">
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle visit-box  row-between  border-b">
					<view class="visit-advtar" @click="toVisitor">
						<image :src="m.avatar" mode=""
							v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
							:style="{left: (20 * ind) + 'rpx'}"></image>
					</view>
				</view>
				<view class="acea-row visit-info row-middle">
					<view @click="toVisitor">{{ dataform.view || 0 }}人浏览</view>
					<view>
						{{dataform.communication &&dataform.communication != 0? dataform.communication : (randomView)}}人咨询
					</view>
				</view>

				<!-- <view>50人感兴趣</view> -->

				<view class="acea-row row-middle row-right share-btns" style="">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">微信</view> -->

					</button>
					<button @click="toReport" style="margin-left: 15rpx;">
						<image src="../static/images/report_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">举报</view> -->
					</button>
				</view>
			</view>


		</view>

		<!-- 求职详情 -->
		<view class="works-detail white-bg mb-24">
			<view class="title">求职详情</view>
			<view class="acea-row row-middle row-between pd-t-b-30">
				<view class="text">{{ dataform.jobName }}</view>
				<view class="price">{{ dataform.salary }}元/月</view>
			</view>
			<view class="acea-row row-middle visit">
				<view  class='label'>行业:</view>
				<view>{{ dataform.hopeIndustryName || '' }}</view>
			</view>
			<view class="acea-row row-middle visit pd-t-b-30 border-b">
				<view class='label'>意向城市:</view>
				<view>{{ dataform.cityName || '' }}</view>
			</view>
		</view>
		<!-- 描述 -->
		<view class="works-detail mb-24 white-bg">
			<view class="title">描述</view>
			<view class="acea-row work-types pd-t-b-30 border-b">
				<view class="type" v-for="(mark,index) in dataform.mark" :key="mark">{{ mark }}</view>
			</view>
		</view>
		<view class="works-detail mb-24 white-bg">
			<view class="title">详情</view>
			<!-- 详情 -->
			<view class="gray-detail pd-t-b-30">
				{{ dataform.content || '无'}}
			</view>
		</view>
		<view class="uni-p-b-98"></view>
		<view class="uni-p-b-98"></view>
		<view class="acea-row row-middle row-between footer">
			<!-- <view class="white-btn">不合适</view> -->
			<view class="white-btn" @click="toPhone(dataform)">拨打电话</view>
			<view class="red-btn" @click="toConcat(item.contacts)">立即沟通</view>
		</view>
		<report :link-id="dataform.id" :types="8" ref="report" />
	</view>
</template>

<script>
	import {
		jobHuntingDetailApi
	} from '@/api/recruit.js'
	import report from "@/pages/details/components/goods_report/report.vue"
	export default {
		components: {
			report
		},
		data() {
			return {
				visitInfo: [1, 2, 3, 4, 5, 3, 3, 3, 3],
				workTypes: [1, 1, 1],
				dataform: {},
				userInfo: {},
				randomView: Math.floor(Math.random() * (500 - 50 + 1)) + 50
			};
		},
		onLoad(option) {
			if (!option.id) return uni.navigateBack();
			this.getData(option.id);
			this.getUserInfo()
		},
		methods: {
			async getData(id) {
				try {
					let {
						data
					} = await jobHuntingDetailApi(id, this.$location);
					if (data.salary) {
						let sa = data.salary.replaceAll('~', '-').split('-');
						if (sa.length > 1) {
							data.salary = sa[0] + '000~' + sa[1] + '000';
						} else {
							data.salary = sa[0] + '000'
						}
					}
					if (data.mark) {
						data.mark = data.mark.replaceAll('/', ',').split(',')
					}

					this.dataform = data
					
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},

			getUserInfo(data) {
				var _this = this;
				this.$store.dispatch('USERINFO').then((res) => {
					_this.userInfo = res;
				});
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom(contact[0].contactPhone)
			},
			toVisitor() {
				console.log('--', this.dataform)
				this.dataform.vistype = 10
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?data=" + JSON.stringify(this.dataform)
				})
			},
			toReport() {
				this.$refs.report.open();
			},
			toPhone(item) {
				let type = 7;
				console.log(item)
				let infoId = item.id;
				let statusPhone = item.statusPhone;
				item.contacts['contactPhone'] ? getApp().globalData.toPhone(item.contacts.contactPhone, '', {
					statusPhone,
					infoId,
					type,
					storeCategory: item.storeCategory,
					open: item.contacts.open,
					infoCity: dataform.city,
					contactName: item.contacts.contactName,
				}) : null
			}
		}
	}
</script>

<style lang="scss" scoped>
	

	.white-bg {
		background: #ffffff;
	}

	.pd-t-b-30 {
		padding: 30rpx 0;
	}

	.mb-24 {
		margin-bottom: 24rpx;
	}

	.border-b {
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}



	.release-person {
		padding: 66rpx 20rpx 20rpx;

		image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
		}

		.info {
			margin-left: 18rpx;

			.name {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(38, 38, 40, 1);

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(212, 212, 212, 1);
				}
			}

			.send-time {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(166, 166, 166, 1);
			}
		}
	}

	.works-detail {
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(10, 5, 5, 1);
		}

		.text {
			width: 50%;
			font-size: 32rpx;
			font-weight: 500;
		}

		.price {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}

		.work-types {
			.type {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding: 10rpx 36rpx;
				border-radius: 10rpx;
				background: rgba(255, 232, 234, 1);
				margin-right: 28rpx;
				margin-bottom: 12rpx;
			}
		}

		.gray-title {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.gray-detail {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: rgba(128, 128, 128, 1);
		}
	}

	.footer {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}

	.white-btn {
		width: 32%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: #ffffff;
		text-align: center;
		color: rgba(238, 33, 45, 1);
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}

	.red-btn {
		// margin-left: 24rpx;
		width: 32%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: rgba(238, 33, 45, 1);
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}
	.label {
		color: #999;
		width: 125rpx
	}
	@import "../static/css/index.scss";
</style>